<template>
  <div>
    <!-- 面包屑 -->
    <el-bread-crumb secondtitle="权限管理" thirdtitle="角色列表"></el-bread-crumb>

    <!-- 卡片 -->
    <el-card-comon>
      <template>
        <!-- 搜索框、添加角色 -->
        <el-row>
          <el-col :span="15">
            <!-- 按钮 -->
            <el-btn-serch-input
              :queryInfo="queryInfo"
              inputContentClearEmitName="searchClear"
              searchEmitName="searchBtnClick"
              openDialogEmitName="openAddUserDialog"
              btnTxt="添加角色"
            />
          </el-col>
        </el-row>

        <!-- table -->
        <role-table :roleList="roleList"></role-table>

        <!-- 分页组件 -->
        <el-pagination-com
          :nowPage.sync="queryInfo.pageNum"
          :pageNumber.sync="queryInfo.pageSize"
          :total="total"
          changeSizeName="changePageNumber"
          changeSizeNumberName="changeNowSize"
        />
      </template>
    </el-card-comon>

    <!-- 添加角色 -->
    <role-dialog-add-user />
    <!-- 编辑角色 -->
    <role-editor-user-info-dialog />
    <!-- 分配角色资源 -->
    <role-distribute-dialog />
  </div>
</template>

<script>
// 组件引入
import ElBreadCrumb from '@/components/common/ElBreadCrumb'
import ElCardComon from '@/components/common/ElCardComon'
// import ElButtonCom from '@/components/common/ElButtonCom'
import RoleTable from '@/views/Main/rightList/roleListComponents/RoleTable'
import RoleDialogAddUser from '@/views/Main/rightList/roleListComponents/RoleDialogAddUser'
import RoleEditorUserInfoDialog from '@/views/Main/rightList/roleListComponents/RoleEditorUserInfoDialog'
import RoleDistributeDialog from '@/views/Main/rightList/roleListComponents/RoleDistributeDialog'
import ElPaginationCom from '@/components/common/ElPaginationCom'
import ElBtnSerchInput from '@/components/common/ElBtnSerchInput'

//网络请求
import { getAllRole } from '@/network/roleControlRequest'

export default {
  data() {
    return {
      roleList: [],
      queryInfo: {
        query: '', // 查询参数
        pageNum: 1, // 当前页面
        pageSize: 10 // 当前每页显示多少条数据
      },
      total: 0 // 订单总数
    }
  },
  created() {
    this.getRole() // 获取Role数据
    this.$bus.$on('getRole', this.getRole);
    this.$bus.$on('resetRole', data => this.resetRole(data));
    this.$bus.$on('changeNowSize', this.getRole);
    this.$bus.$on('changePageNumber', this.getRole);
    this.$bus.$on('searchClear', () => {
      this.queryInfo.query = '';
      this.getRole();
    });
    this.$bus.$on('searchBtnClick', this.getRole);
    this.$bus.$on('openAddUserDialog', () => {
      this.$bus.$emit('openMyDialog', true)
    });
  },
  destroyed() {
    this.$bus.$off('getRole');
    this.$bus.$off('resetRole');
    this.$bus.$off('changeNowSize');
    this.$bus.$off('changePageNumber');
    this.$bus.$off('searchClear');
    this.$bus.$off('searchBtnClick');
    this.$bus.$off('openAddUserDialog');
  },
  methods: {
    /**
     * 分页获取角色
     */
    async getRole() {
      // 获取Role数据列表
      const { data, meta } = await getAllRole(this.queryInfo)
      if (meta.status !== 200) {
        return this.$message.error('网络请求失败')
      }

      // 数据获取成功
      this.roleList = data.info.list
      this.total = data.info.total
      // console.log(this.total)
      return this.$message.success('数据获取成功')
    },
    resetRole({ id: userId, retData }) {
      // 重新给roleList赋值, 避免重新渲染
      // console.log(userId, retData);
      // console.log(this.roleList);
      this.roleList.forEach(item => {
        if (item.id === userId) {
          // console.log(item.id, userId);
          return (item.children = retData)
        }
      })
    }
  },
  components: {
    ElBreadCrumb,
    ElCardComon,
    // ElButtonCom,
    RoleTable,
    RoleDialogAddUser,
    RoleEditorUserInfoDialog,
    RoleDistributeDialog,
    ElPaginationCom,
    ElBtnSerchInput
  }
}
</script>

<style lang="scss" scoped>
</style>